<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<style>
  body {
    margin: 0px;
    background-color: rgba(50, 50, 50, 0.9);
    color: white;
  }

  .header {
    margin: 0 auto;
    width: 500px;
  }

  .main {
    margin: 0 auto;
    width: 900px;
  }

  .image {
    width: 200px;
    height: 80px;
  }
</style>

<body>

  <div id="app">
    <el-page-header @back="goBack" style="color: white; font-size: 100px;"  >
    </el-page-header>


    <div class="header">
      <i style="font-size: 100px;" class="el-icon-user"></i>
      <div style="font-size: 70px;  ">
        {{userbase.name}}
      </div>
      <div>
        <div>
          <span style="font-size: 30px;">id：{{userbase.id}} </span> 
        </div>
        <div>
          <span style="font-size: 30px;">用户名：{{userbase.name}}</span> 
        </div>
        <div>
          <span style="font-size: 30px;">电话：{{userbase.phone}}</span> 
        </div>
        <div>
          <span style="font-size: 30px;">地址：{{userbase.address}}</span> 
        </div>
        <div>
          <span style="font-size: 30px;">姓名：{{userbase.realname}}</span> 
        </div>
      </div>
      <el-button @click="logout">退出登陆</el-button>

    </div>
     
    </el-container>
  </div>

</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.js"></script>

<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {

      alertUser: false,
      alertForm: {

      },
      ruleForm: {

      },
      comment: "",
      userbase: {},
      tabPosition: "left",
      movielist: [],
      commentlist: [],
    },
    mounted() {
      this.getuserbase();
      this.getbill();
      this.getMovielist();
    },
    methods: {
      goBack() {
        window.location.href ="/index.jsp"
      },
      logout() {
        axios.post("/logout").then(res => {
          window.location.href = "/login"
        })
      },
      sendcomment(item) {
        axios.post("/comment/addComment", { uid: this.userbase.id, mid: item.basedata.id, content: this.comment }).then(res => {
          if (res.data.result == "ok") {
            this.$notify.success({
              title: '发布成功',
              message: '发布成功'
            })
          }
        })
      },
      getcode(item) {
        return "http://qr.topscan.com/api.php?text=" + item.moviedata.moviedata;

      },
      getMovielist(parmid) {
        axios.post("/usermovie/getUserMovie", { id: this.userbase.id }).then(res => {
          console.log(res);
          this.movielist = res.data.data;
          var movielistid = []
          this.movielist.forEach(element => {
            if (movielistid.indexOf(element.moviedata.id) == -1)
              movielistid.push(element.moviedata.id)

          });
          console.log(movielistid)
          movielistid.forEach(element => {
            axios.post("/comment/getComment", { id: element }).then(res2 => {
              console.log(res2.data)
              this.commentlist.push(res2.data);
            })
          });

        })
        // axios.post("/comment/getComment",{id:parmid}).then(res=>{
        //   let {result ,data} = res.data
        //   if(result == "ok"){
        //   }
        // })
      },
      getuserbase() {
        this.userbase = JSON.parse(localStorage.getItem("userbase"));
      },
      getbill() {

      }
    }
  })
</script>

</html>